<template>
    <div>
        <!-- <el-card>
            软文标题:
            <el-input v-model="queryData.article"></el-input>:action="$myUrl.BASEURL + 'system/resourceFileUpload'"
        </el-card> -->
        <el-card>
            <el-form label-width="120px">
                <el-form-item label="软文标题">
                    <el-input v-model="queryData.articletitle"></el-input>
                </el-form-item>

                <el-form-item label="软文简介">
                    <el-input type="textarea" :rows="5" placeholder="请输入简介" v-model="queryData.content"></el-input>
                </el-form-item>

                <el-form-item label="背景图片">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :before-upload="bgImgBeforeUpload"
                        :on-success="bgImgSuccess"
                        :data="bgImgMark"
                    >
                        <img style="width: 100%" class="avatar" :src="bgImgSrc" v-if="bgImgSrc" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="所属栏目">
                    <el-radio :label="0" v-model="queryData.programaType">在线会展</el-radio>
                    <el-radio :label="2" v-model="queryData.programaType" @change="setProgramaType">企投家</el-radio>
                </el-form-item>
                <el-form-item label="软文类型" v-if="queryData.programaType == 0">
                    <el-radio-group v-model="queryData.articleType">
                        <el-radio :label="0">软文详情</el-radio>
                        <el-radio :label="1">主题展</el-radio>
                        <el-radio :label="2">公司</el-radio>
                        <el-radio :label="3">产品</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="软文类型" v-if="queryData.programaType == 2">
                    <el-radio-group v-model="queryData.articleType">
                        <el-radio :label="0">软文类型</el-radio>
                        <el-radio :label="1" disabled>主题展</el-radio>
                        <el-radio :label="2" disabled>公司</el-radio>
                        <el-radio :label="3" disabled>产品</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- // 富文本 -->
                <el-form-item label="编辑内容" v-if="queryData.articleType == 0">
                    <mavon-editor v-model="queryData.textContent" />
                </el-form-item>
                <!-- // 会展 -->
                <el-form-item>
                    <div v-if="queryData.articleType == 1 || queryData.articleType == 2 || queryData.articleType == 3">
                        会展:
                        <el-select v-model="queryData.exhibitionId" placeholder="请选择" @change="exhibitionChange">
                            <el-option v-for="(item, index) in exhibitionList" :key="index" :label="item.value" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <br />
                    <div v-if="queryData.articleType == 2 || queryData.articleType == 3">
                        公司:
                        <el-select v-model="queryData.companyId" placeholder="请选择" @change="companyChange">
                            <el-option v-for="(item, index) in companyList" :key="index" :label="item.companyName" :value="item.companyId">
                            </el-option>
                        </el-select>
                    </div>
                    <br />
                    <div v-if="queryData.articleType == 3">
                        产品:
                        <el-select v-model="queryData.productId" placeholder="请选择">
                            <el-option v-for="(item, index) in productList" :key="index" :label="item.value" :value="item.id"> </el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item label="是否推荐">
                    <el-radio-group v-model="queryData.isRecommend">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="作者" v-if="queryData.isRecommend == 0">
                    <el-input placeholder="请输入作者" v-model="queryData.author"></el-input>
                </el-form-item>

                <el-form-item label="作者头像" v-if="queryData.isRecommend == 0">
                    <el-upload
                        class="avatar-uploader"
                        :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                        :before-upload="bgImgBeforeUpload"
                        :on-success="authorImgSuccess"
                        :data="bgImgMark"
                    >
                        <img style="width: 100%" :src="authorHeadImgSrc" class="avatar" v-if="authorHeadImgSrc" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button @click="$router.push('/table')">取消</el-button>
                    <el-button type="primary" @click="onSubmit">表单提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios';
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
//import { getRichText } from '../../api/company.js';
import data from './data.js';
import { log } from 'util';
export default {
    data() {
        return {
            aaa: 0,
            queryData: {
                articletitle: '',
                content: '',
                bgImg: '',
                // 栏目类型
                programaType: 0,
                // 软文类型
                articleType: 0,
                // 富文本
                textContent: '',
                // 推荐
                isRecommend: 0,
                
                exhibitionId: '',
                companyId: '',
                productId: '',
                // 作者
                author: '1111',
                // 头像
                authorHeadImg: ''
            },
            // 图片预览路径
            authorHeadImgSrc: '',
            bgImgSrc: '',
            //会展列表
            exhibitionList: [],
            companyList: [],
            productList: [],
            // 标识
            bgImgMark: {
                fileGroup: 'article',
                fileidentName: 'bgImgMark'
            },
            form: {
                content: '',
                // 是否推荐111
                isRecommend: '',
                getExhibitionType: '0'
            }
        };
    },
    mounted() {
        this.getExhibitionList();
        this.getCompanyList();
    },
    created() {
       
        if (this.$route.query.articleId) {
            this.getSoftData();
        } else {
            this.queryData = {};
        }
    },
    methods: {
        setProgramaType(){
          this.queryData.articleType = 0
        },
        getSoftData() {
            axios.get(this.$myUrl.BASEURL + 'article/getArticle?articleId=' + this.$route.query.articleId).then((res) => {
                console.log('软文数据', res);
                let that = res.data.data;
                (this.queryData.articletitle = that.articleTitle), (this.queryData.content = that.articleIntroduce);
                this.queryData.bgImg = that.titleImg;
                this.bgImgSrc = this.$myUrl.IMGURL + that.titleImg;
                // // 栏目类型
                this.queryData.programaType = that.programaType;
                // // 软文类型
                this.queryData.articleType = that.articleType;
                // // 富文本
                this.queryData.textContent = that.richText;
                // // 推荐
                this.queryData.isRecommend = that.isRecommend;
                // exhibitionId: '',
                // companyId: '',
                // productId: '',
                // // 作者
                this.queryData.author = that.author;
                // // 头像
                this.queryData.authorHeadImg = that.authorHeadImg;
                this.authorHeadImgSrc = this.$myUrl.IMGURL + that.authorHeadImg;
            });
        },
        // 上传判断
        bgImgBeforeUpload(file) {
            const isJpgAndPng = file.type === 'image/jpeg' || file.type ===  'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJpgAndPng) {
                this.$message.error('只能上传 JPG/PNG 格式图片!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJpgAndPng && isLt2M;
        },
        authorImgSuccess(res) {
            this.queryData.authorHeadImg = res.data.relativePath;
            this.authorHeadImgSrc = this.$myUrl.IMGURL + res.data.relativePath;
        },
        bgImgSuccess(res) {
            console.log('成功');
            this.queryData.bgImg = res.data.relativePath;
            this.bgImgSrc = this.$myUrl.IMGURL + res.data.relativePath;
        },
        //主题展数据
        getExhibitionList() {
            axios.get(this.$myUrl.BASEURL + 'exhibit/getExhibitBasicList').then((res) => {
                console.log('主题展', res);
                this.exhibitionList = res.data.data;
            });
        },
        exhibitionChange() {
            this.getCompanyList();
        },
        companyChange() {
            this.productList = [];
            this.getProductList();
        },
        // 公司数据
        getCompanyList() {
            console.log(this.queryData.exhibitionId);
            axios
                .get(this.$myUrl.BASEURL + 'exhibit/getExhibitCompanyListInfo?showCompanyType=0&exhibitId=' + this.queryData.exhibitionId)
                .then((res) => {
                    console.log('公司', res);
                    this.companyList = res.data.data;
                });
        },
        // 产品数据
        getProductList() {
            axios.get(this.$myUrl.BASEURL + 'product/getProductBasicList?companyId=' + this.queryData.companyId).then((res) => {
                console.log('产品数据', res);
                this.productList = res.data.data;
            });
        },
        // 提交
        onSubmit() {
            
            console.log(this.queryData.articletitle);
            // 封装好的提交请求
            let onSubmitFn = () => {
                if (!this.$route.query.articleId) {
                    axios
                        .post(this.$myUrl.BASEURL + 'article/addArticle', {
                            articleTitle: this.queryData.articletitle,
                            titleImg: this.queryData.bgImg,
                            articleIntroduce: this.queryData.content,
                            programaType: this.queryData.programaType,
                            isRecommend: this.queryData.isRecommend,
                            articleType: this.queryData.articleType,
                            author: this.queryData.author,
                            authorHeadImg: this.queryData.authorHeadImg,
                            richText: this.queryData.textContent
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('提交成功');
                                this.$router.push('/table');
                            }
                        });
                } else {
                    axios
                        .put(this.$myUrl.BASEURL + 'article/updateArticle', {
                            id: this.$route.query.articleId,
                            articleTitle: this.queryData.articletitle,
                            titleImg: this.queryData.bgImg,
                            articleIntroduce: this.queryData.content,
                            programaType: this.queryData.programaType,
                            isRecommend: this.queryData.isRecommend,
                            articleType: this.queryData.articleType,
                            author: this.queryData.author,
                            authorHeadImg: this.queryData.authorHeadImg,
                            richText: this.queryData.textContent
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('编辑成功');
                                this.$router.push('/table');
                            } else {
                                this.$message.success('出错了');
                            }
                        });
                }
            };
            if (this.queryData.articletitle == '') {
                this.$message.error('请输入软文标题');
            } else if (this.queryData.content == '') {
                this.$message.error('请输入软文简介');
            } else if (this.queryData.bgImg == '') {
                this.$message.error('请上传背景图');
            } else {                
                onSubmitFn();

                // let that = this
                // if (this.queryData.isRecommend == '0') {
                //     console.log(that.queryData.author);
                //     if (that.queryData.author == '') {
                //         that.$message.error('请输入作者名称');
                //     } else if (that.queryData.authorHeadImg == '') {
                //         that.$message.error('请上传作者头像');
                //     } else {
                //         // onSubmitFn();
                //     }
                // } else {
                //     // onSubmitFn();
                // }
            }
        }
    }
};
</script>
<style>
</style>